<template>
	<view>
		<uni-card>
			<view style="text-align: center; margin: 50rpx 30rpx; font-size: 38rpx;">欢迎登录</view>
			<uni-forms ref="form" :modelValue="form" :rules="rules" validateTrigger="blur">
				<uni-forms-item name="username" required>
					<uni-easyinput prefixIcon="person" v-model="form.username" placeholder="请输入账号" />
				</uni-forms-item>
				<uni-forms-item name="password" required>
					<uni-easyinput type="password" prefixIcon="locked" v-model="form.password" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item>
					<view style="text-align: right;padding-top: 10px;">还没有账号？去 <navigator style="display: inline-block; color: dodgerblue; 
					margin-left: 4rpx;" url="/pages/register/register">注册</navigator></view>
				</uni-forms-item>
				<uni-forms-item>
					<button @click="login()" style="background-color: #87CEEB;">登 录</button>
				</uni-forms-item>
	
			</uni-forms>
		</uni-card>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					role: 'USER'
				},
				rules: {
					password: {
						//password的字段的校验规则
						rules:[
							//校验 password 不为空
							{
								required: true,
								errorMessage: '请输入密码'
							}
						]
						},
						
	
					//对username字段进行验证
					username: {
						//username的字段的校验规则
						rules:[
							//校验 username 不为空
							{
								required: true,
								errorMessage: '请输入账号'
							},
							{
							    minLength: 3,
							    maxLength: 10,
							    errorMessage: '账号长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					}
				}
			}
		},
 methods: {
		login(){
			this.$refs.form.validate().then(res=>{
				this.$request.post('/login',this.form).then(res => {
					if(res.code === '200'){
						uni.setStorageSync('xm-user',res.data)
						//跳转到主页
						uni.switchTab({
							url:'/pages/index/index'
						})
						uni.showToast({
							icon:'success',
							title:'登录成功'
						})
					}else{
						uni.showToast({
							icon:'error',
							title:res.msg
						})
					}
				})
			}).catch(err => {
				console.log('表单错误查看',err)
			})
			
		}
	 }
		
}
</script>

<style>

</style>
